<template>
	<div>
        <div class="marginLeftRight">
            <div class="wrapper-container chose">
                <div>请选择学员：</div>
                <div class="search-button color-primary" @click="choseXY">
                    <img src="../../../assets/assessment/icon-search.png" alt="" />
                </div>
            </div>
            <div class="my-form-container threeForm" style="height:122px">
                <el-form :model="ruleForm">
                    <el-row class="my-form-item">
                    <el-col :span="8">
                        <div class="my-form-item-label">姓名【学号】</div>
                        <div class="my-form-item-value">{{choseXYForm.studentName}}【{{choseXYForm.studentCode}}】</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="my-form-item-label">年级</div>
                        <div class="my-form-item-value">{{choseXYForm.grade}}</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="my-form-item-label">专业</div>
                        <div class="my-form-item-value">{{choseXYForm.specialty}}</div>
                    </el-col>
                    </el-row>
                    <el-row class="my-form-item" style="border:none">
                    <el-col :span="8">
                        <div class="my-form-item-label">专业班次</div>
                        <div class="my-form-item-value">{{choseXYForm.className}}</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="my-form-item-label">学员队</div>
                        <div class="my-form-item-value">{{choseXYForm.studentDui}}</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="my-form-item-label">学籍状态</div>
                        <div class="my-form-item-value">{{choseXYForm.studentStatus}}</div>
                    </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="my-form-container" :style="{height:(ruleForm.changeType==0 || ruleForm.changeType==2 || ruleForm.changeType==6)?'449px':'389px'}">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <!--0：降级；1:退学；2：休学3:复学 4:恢复学籍；5：转学6：转专业 -->
                            <div class="my-form-item-label ">异动类型<span class="star">*</span></div>
                            <el-form-item  prop="changeType">
                                <div class="my-form-item-value">
                                    <el-select v-model="ruleForm.changeType" placeholder="请选择" class="inputWidth" @change="changeTypeValue">
                                        <el-option v-for="item in diffList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
                                    </el-select>
                                    <el-checkbox v-if="ruleForm.changeType == 4 || ruleForm.changeType == 3" v-model="ruleForm.keepOld" class="syzy">随原专业班次学习</el-checkbox>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item" v-if="['0','3','4','6'].includes(ruleForm.changeType)">
                        <el-col :span="24">
                            <div v-if='ruleForm.changeType == 6' class="my-form-item-label">请指定转专业后专业班次<span class="star">*</span></div>
                            <div v-if='ruleForm.changeType == 4' class="my-form-item-label">恢复学籍后专业班次<span class="star">*</span></div>
                            <div v-if='ruleForm.changeType == 3' class="my-form-item-label">复学后专业班次<span class="star">*</span></div>
                            <div v-if='ruleForm.changeType == 0' class="my-form-item-label">请指定降级后专业班次<span class="star">*</span></div>
                            <el-form-item  prop="professionaldivisionsShow">
                                <div class="my-form-item-value chose-student">
                                        <el-input style="width:267px" v-model="ruleForm.professionaldivisionsShow" disabled></el-input>
                                        <img src="../../../assets/assessment/icon-plan-record-detail.png" @click="choseDialog"> 
                                        <img src="../../../assets/assessment/icon-delete.png" @click="deleteInput"> 
                                 </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item" v-if="ruleForm.changeType == 2">
                        <el-col :span="24">
                            <div class="my-form-item-label">休学时间<span class="star">*</span></div>
                            <el-form-item  prop="starTime" class="startTime" style="width:170px">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.starTime" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item  prop="endTime">
                                <div class="my-form-item-value">
                                    到&nbsp;&nbsp;
                                    <el-date-picker class="time" v-model="ruleForm.endTime" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
                                    <span>（注：休学时间必须大于三个月）</span>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item"  v-if="ruleForm.changeType !== '3' &&  ruleForm.changeType !== '4'">
                        <el-col :span="24">
                            <div class="my-form-item-label ">异动原因</div>
                            <el-form-item  prop="reason">
                                <div class="my-form-item-value">
                                    <el-select v-model="ruleForm.reason" placeholder="请选择" style="width:160px">
                                        <el-option v-for="item in reasonList" :key="item.label" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <div class="my-form-item-label">异动批准文号<span class="star">*</span></div>
                            <el-form-item  prop="changeApproveNum">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.changeApproveNum"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <div class="my-form-item-label">批准日期<span class="star">*</span></div>
                            <el-form-item  prop="changeTime">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.changeTime" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item lastOne">
                        <el-col :span="24">
                            <div class="my-form-item-label">备注信息</div>
                            <div class="my-form-item-value assessment-design">
                                <el-input v-model="ruleForm.comments" type="textarea" :rows="4" style="width: 969px;" placeholder="请输入内容"></el-input>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="button-group">
                <div class="" @click="save">保存</div>
                <div class="" @click="cancel">取消</div>
            </div>
        </div>
    <!-- 选择学员 -->
    <ChoseStudent ref="choseStudent" @choseXY="getStudent"></ChoseStudent>
    <!-- 选择专业班次 -->
    <ChoseZY ref="chosezy" @choseZY="choseResult"></ChoseZY>
	</div>
</template>

<script>
import {studentStatusDiffAdd} from "@/api/student";
import ChoseZY from '@/components/choseZY' 
import ChoseStudent from '@/components/choseStudent';
  export default {
    data(){
        return {
            ruleForm:{
                changeType:'4',//异动类型
                changeApproveNum:'',//异动批准文号
                changeTime:'',//批准日期
                comments:'',//备注
                keepOld:'',//是否随原班次学习
                professionaldivisions:'',//异动专业班次号
                studentCode:'',//学员编号
                reason:'',//异动原因
                starTime:'',//休学开始
                endTime:'',//休学结束时间
                professionaldivisionsShow:'',
            },
            diffList:[],//异动类型
            reasonList:[
                {label:'伤病原因',value:'伤病原因'},
                {label:'成绩原因',value:'成绩原因'},
                {label:'其他原因',value:'其他原因'},
            ],
            choseXYForm:{},
            rules: {
                professionaldivisionsShow: [
                    { required: true, message: '请选择专业班次', trigger: 'blur' }
                ],
                starTime: [
                    { required: true, message: '请选择休学开始时间', trigger: 'change' }
                ],
                endTime: [
                    { required: true, message: '请选择休学结束时间', trigger: 'change' }
                ],
                reason: [
                    { required: true, message: '请选择异动原因', trigger: 'change' }
                ],
                changeApproveNum: [
                    { required: true, message: '请填写异动批准文号', trigger: 'blur' }
                ],
                changeTime: [
                    { required: true, message: '请填写异动批准日期', trigger: 'blur' }
                ],
            }
        }
    },
    components:{ChoseZY,ChoseStudent},
    mounted(){
        //异动列表
        this.commonApi.getCommonData({code:'CHANGE_TYPE'}).then(res=>{
        this.diffList = res.data
        })
    },
    methods: {
        getStudent(e){
            this.choseXYForm = e;
            this.ruleForm.studentCode = e.studentCode
        },
        //选择学员
        choseXY(){
            this.$refs.choseStudent.dialogVisible = true
        },
        //选择专业班次
        choseDialog(){
            this.$refs.chosezy.dialogVisible = true;
        },
        choseResult(e){
            this.ruleForm.professionaldivisions = e.id
            this.ruleForm.professionaldivisionsShow = e.className
        },
        deleteInput(){
            this.ruleForm.professionaldivisions = '';
            this.ruleForm.professionaldivisionsShow = ''
        },
        //改变异动类型
        changeTypeValue(e){
            // <!--0：降级；1:退学；2：休学3:复学 4:恢复学籍；5：转学6：转专业 -->
            if(e != 2 ){
                this.ruleForm.starTime = '';
                this.ruleForm.endTime = '';
            } 
            if(e == 3 || e == 4){
                this.ruleForm.reason = ''
            }
            if(e == 1 || e == 2 || e ==5){
                this.ruleForm.professionaldivisions = '';
                this.ruleForm.professionaldivisionsShow = ''
            }
            if(e !== '3' || e !== '4'){
                this.ruleForm.keepOld = ''
            }
        },  
        //保存数据
        save(){
            this.$refs['ruleForm'].validate(async(valid) => {
                if (valid) {
                    let params = {
                        ...this.ruleForm,
                        keepOld:this.ruleForm.keepOld?1:''
                    }
                    let res = await studentStatusDiffAdd(params);
                    if(res.code == 200){
                        if(res.data==true){
                            this.$router.push({
                            path:'/student/studentStatusDiff/list'
                        })
                        }else{
                            this.$message.error(res.msg)
                        }

                    }else{
                        this.$message.error(res.msg);
                    }

                } 
            });
        },
        //取消
        cancel(){
            this.$router.push({
                path:'/student/studentStatusDiff/list'
            })
        }
    }
  };
</script>

<style scoped lang="less">
@import "../../../styles/commonCss.less";
  .height449{height: 449px!important;}
  .height389{height: 389px!important;}
  .chose{
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #004CA7;
    height: 30px;
    margin-top: 28px;
    .color-primary{
      background: #f1f8fe;
      border: 1px solid #51aef6;
      width:50px;
    }
  }
  .syzy{
    margin-left: 54px;
  }
  .threeForm{
    .my-form-item-label{width: 197px!important;}
  }
    /deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
        .star{
            font-size: 16px;
            color: #FF3819;
            margin: -13px 0 0 2px;
        }
    }
    .lastOne{
        border:none;height:148px;
        /deep/.el-form-item__error {
            top:80%;
        }
    }
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.inputWidth{width: 160px;}
    .assessment-design {
        padding: 25px 38px !important;
        .el-textarea__inner {
            resize:none
        }
        .red-tip {
            margin: 0 7px;
            display: inline-block;
            vertical-align: 105px;
        }
    }
</style>